<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2017/1/3.
     */
    import b from '../bus'

    export default {
        props: {
            userInfo: {
                default: null
            }
        },
        data () {
            return {
                comments: [],
                searchField: '',
                pageIndex: 1,
                pageSize: 30,
                stateMap: ['未匹配', '追踪中', '结束', '审核中', '', '正常车'],
                bgMap: ['b17', 'b10', 'b20', 'b13', 'b17', 'b17'],
            }
        },
        computed: {
            isListEmpty () {
                return this.comments.length == 0
            }
        },
        created () {
            b.$on('gotcha', () => {
                this.getList()
        })
        },
        mounted () {
            this.changeTitle('车捕头-历史记录');
            if (this.userInfo.id) {
                this.getList();
            }
        },
        methods: {
            getList () {
                let pd        = {};
                pd.p          = this.pageIndex;
                pd.s          = this.pageSize;
                pd.downstream = this.userInfo.id;

                this.get('/api/v1/traces', pd, {errmsg: '查询列表失败'})
                    .then(res => {
                    this.comments = res.data.rows.map(e => {
                        return {
                            carNumber: e.car_number,
                            time: e.last_update_at,
                            status: this.stateMap[e.state],
                            bg: this.bgMap[e.state]
                        }
                    }
            )
            })
            }
        }
    }
</script>

<template>
    <div class="list">
        <div class="list__wrapper">
            <ul class="list__box">
                <li v-if="isListEmpty" class="list__empty">
                    暂无提交情报
                </li>
                <li v-else v-for="comment in comments" class="list__comment z4" layout="row center-left">
                    <div class="list__status" :class="comment.bg" layout="row center-center">{{comment.status}}</div>
                    <div class="list__content" layout="column top-left">
                        <h5 class="list__carid">{{comment.carNumber}}</h5>
                        <p class="list__time">{{comment.time}}</p>
                        <p class="list__desc"></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>